<!-- 批量修改品牌 -->

<style lang="scss" scoped>
.tips {
  font-size: 16px;
  .fw {
    font-weight: 700;
  }
}

.search-brand {
  margin-top: 20px;

  display: flex;
  flex-direction: row;
  align-items: center;

  span {
    margin-right: 30px;
    font-size: 14px;
    font-weight: 700;
  }
}

.progress {
  margin-top: 30px;
}

.submit-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

::v-deep .el-dialog {
  .el-dialog__body {
    padding: 0 20px;
  }
}

</style>

<style lang="scss">
.edit-brand-batch-dialog-confirm-message {
  .confirm-message-box {
    span {
      color: red;
      font-weight: 700;
    }
  }
}
</style>

<template>
  <el-dialog title="批量修改品牌" :visible.sync="showDialog" @close="$emit('update:visible', false)">
    <div>
      <el-tag
        type="danger"
        effect="plain"
        size="medium"
        style="display: block;"
      >
        <div class="tips">
          正在批量修改 <span class="fw">{{ page }}</span>页 共 <span class="fw">{{ total }}</span>条 数据
        </div>
      </el-tag>
    </div>

    <div class="search-brand">
      <span>选择品牌</span>
      <SearchBrand class="flex" input-width="370px" @select="selectBrand" />
    </div>

    <div class="progress">
      <el-progress :percentage="percentage" />
    </div>

    <div slot="footer" class="submit-button">
      <div />
      <div>
        <el-button type="primary" :disabled="editing" @click="submit">提交</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>

import _ from 'lodash'
import SearchBrand from '@/components/Template/Product/SearchBrand'

import { handleList, batchBrand } from '@/api/base/product'

export default {

  components: {
    SearchBrand
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 0
    },
    query: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      showDialog: this.visible,

      // 品牌信息
      brand: null,

      // 请求参数
      cloneQuery: {},

      // 正在修改
      editing: false,

      // 进度条
      percentage: 0
    }
  },

  methods: {
    selectBrand(brandInfo) {
      this.brand = brandInfo
    },

    submit() {
      if (!this.brand) {
        this.$message.error('请选择品牌')
        return
      }

      this.$confirm(`<div class="confirm-message-box">确认将 <span>${this.total}条</span> 商品的品牌改为 <span>${this.brand.brand_name}</span></div>`, {
        dangerouslyUseHTMLString: true,
        customClass: 'edit-brand-batch-dialog-confirm-message'
      })
        .then(() => {
          this.cloneQuery = _.cloneDeep(this.query)
          // 修改时分页每页 100 条
          this.cloneQuery.limit = 100
          // 开始修改
          this.editing = true
          this.doEdit()
        })
        .catch(() => {})
    },

    async doEdit(page = 1) {
      this.cloneQuery.page = page
      // 获取商品
      const productResponse = await handleList(this.cloneQuery).then(res => res.data)

      // 批量修改
      await batchBrand({
        product_arr: _.map(productResponse.data, item => item.product_id),
        brand_id: this.brand.brand_id
      })

      // 判断是否修改完所有分页数据
      if (page < productResponse.last_page) {
        // 进度条
        this.percentage = ((page / productResponse.last_page) * 100) | 0
        // 下一页
        this.doEdit(++page)
      } else {
        this.percentage = 100
        setTimeout(() => {
          this.$message.success('批量修改成功')
          this.showDialog = false
        }, 700)
      }
    }
  }
}
</script>

<style>

</style>
